import 'package:chathouse/constant/my_color.dart';
import 'package:chathouse/util/font_utils.dart';
import 'package:chathouse/widgets/form_widgets/form_widgets.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:chathouse/util/base_utils.dart';
import 'widget_paras.dart';
import 'package:dropdown_button2/dropdown_button2.dart';

typedef DropDownWidgetItemChange = Function(String val);

//問題類型7 下拉(面積)
class AreaSelectWidget7 extends StatefulWidget {
  String? title;
  String placeholder;
  String? selectedValue;
  List<KeyValueBean> initValue;
  DropDownWidgetItemChange onSelectedItemChange;

  bool request;

  String? get getSelectedItemName {
    String? name;
    for (var element in initValue) {
      if (element.value == selectedValue) {
        name = element.name;
      }
    }
    return name;
  }

  AreaSelectWidget7(
      this.title, this.selectedValue, this.initValue, this.onSelectedItemChange,
      {this.placeholder = "請選擇", this.request = false, Key? key})
      : super(key: key);

  @override
  State<AreaSelectWidget7> createState() => _AreaSelectWidget7State();
}

class _AreaSelectWidget7State extends State<AreaSelectWidget7> {
  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.only(left: 26.w, right: 26.w),
        child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          Row( crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              widget.request
                  ? Text(
                      "*",
                      style: getTextStyle(18.sp, color: Colors.red),
                    )
                  : Container(),
              Expanded(
                  child: Text(
                widget.title ?? "",
                style: getTextStyle(18.sp, color: Colors.black),
              ))
            ],
          ),
          SizedBox(
            height: 12.w,
          ),
          DropdownButton2(
            customButton: Container(
              height: INPUT_ITEM_HEIGHT.w,
              padding: EdgeInsets.symmetric(horizontal: 12.w),
              decoration: BoxDecoration(
                border: Border.all(color: MyColors.gary_158157157, width: 1.w),
              ),
              child: Row(
                children: [
                  Expanded(
                    child: Text(
                      widget.getSelectedItemName ?? widget.placeholder,
                      style: getTextStyle(16.sp,
                          color: widget.getSelectedItemName == null
                              ? MyColors.gary_155155155
                              : Colors.black),
                    ),
                  ),
                  Icon(
                    Icons.keyboard_arrow_down_rounded,
                    size: 24.w,
                    color: MyColors.gary_112112112,
                  )
                ],
              ),
            ),
            items: widget.initValue.map((e) {
              return DropdownMenuItem<String>(
                value: e.value,
                child: Text(
                  e.name,
                  style: getTextStyle(16.sp, color: Colors.black),
                ),
              );
            }).toList(),
            itemHeight: INPUT_ITEM_HEIGHT.w,
            value: widget.selectedValue,
            onChanged: (val) {
              setState(() {
                widget.selectedValue = "$val";
              });
              widget.onSelectedItemChange("$val");
            },
            underline: Container(),
          )
        ]));
  }
}
